<template>
	<div class="btn-wrap" v-if="usertype !== activeForUser.Master ">
		<button v-if="usertype === activeForUser.UnLogin " class="btn-join-normal" @click="loginwithjoin">*加入*</button>
    	<button v-if="usertype === activeForUser.Normal " class="btn-join-normal" @click="showJoin">加入</button>
	    <button v-if="usertype === activeForUser.Joining " class="btn-apply-normal">申请中</button>
	    <button v-if="usertype === activeForUser.Joined " class="btn-exit-normal" @click="confirmShow">退出</button>
	    <button v-if="usertype === activeForUser.Joined " class="btn-exit-normal" @click="goConversation">参与群聊</button>
	    <button v-if="usertype === activeForUser.End" class="btn-end-normal">已结束，无法加入</button>
    </div>
    <div class="btn-wrap" v-if="usertype === activeForUser.Master ">
        <button v-if="usertype === activeForUser.Joined || usertype === activeForUser.Master" class="btn-exit-normal" @click="goConversation">参与群聊</button>
    </div>
    <confirm :show.sync="show" confirm-text="确定" cancel-text="取消" title="操作提示" @on-confirm="quit" @on-cancel="confirmHide">
  		<p style="text-align:center;">确认退出吗？</p>
    </confirm>
</template>

<script>

import { PostMemberService } from '../../../services/postmember'
import { ActiveForUser } from '../../../const'
import Toast from '../Toast'
import Confirm from 'vux-components/confirm'
import Join from '../Join/index.js'
import * as account from "../../../services/account"
import {imclient} from "../../../assembly"

import LoginWithJoin from '../LoginWithJoin/index.js'
let postmember = new PostMemberService()

export default {
    name: 'DetailButton',
    components: {
        Confirm
    },
    data() {
        return {
            show: false,
            activeForUser: ActiveForUser
        }
    },
    props:{
        usertype: Number,
        item: Object
    },
    methods:{
        goConversation() {
            if (!this.item.conversationId) {
                throw new Error("this.item.conversationId undefine")
            }
            imclient.getConversation(this.item.conversationId).then(conv => {
                account.CurrentUser().then(user => {
                    if (conv.members.includes(user.id)) {
                        this.$route.router.go({ name: 'Conversation', params: { conversationId: this.item.conversationId }})
                    } else {
                        Toast.show('您不在群聊成员之列')
                    }
                })
            })
        },
        confirmShow() {
            this.show = true
        },
        confirmHide() {
            this.show = false
        },
        showJoin() {
            Join.show(this.item.id)
        },
        login() {
            postmember.Join({id:'', nickName:''})
        },
        loginwithjoin(){
            LoginWithJoin.show(this.item.id)
        },
        async quit() {
            let id = this.item.id
            let res = await postmember.Quit({id:id})
            window.location.reload()
        }
    }
}
</script>
